import { Tabs } from 'antd'
import DataDisplayPanel from '../AntChartTable'
import ChartTableDisplay from '../ChartTable'
import ScriptEditor from '../ScriptEngine/ScriptEditor'

import styles from '../TabPane/TabPane.module.css'
import { useState } from 'react'
const { TabPane } = Tabs

const tabItems = [
  { key: '1', label: 'Dashboard', color: '#ffcccc' },
  { key: '2', label: 'Reports', color: '#ccffcc' },
  { key: '3', label: 'Settings', color: '#ccccff' },
  { key: '4', label: 'Script', color: '#ffffcc' }
]

// const styledTabs = styled(Tabs)`
//   .ant-tabs-content-holder {
//     border:2px solid #3f3;
//     height: 100%;
//   }
// `
const TabView = () => {
  const [activeTab, setActiveTab] = useState('4')
  return (
    <Tabs
      type="editable-card"
      className={styles.customTabs}
      activeKey={activeTab}
      onChange={setActiveTab}
      tabBarStyle={{ borderBottom: '2px solid #ccc' }}
      style={{ display: 'flex', flexDirection: 'column', flex: 1 }}
    >
      {tabItems.map((tab) => (
        <TabPane key={tab.key} tab={tab.label} style={{  height: '100%', flex: 1 }} >
          <div
            style={{
              flex: 1,
              height: '100%',
              // background: 'Blue', //tab.color,
              // display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            {((): JSX.Element => {
              if (tab.label == 'Reports') {
                return <ChartTableDisplay />
              } else if (tab.label == 'Settings') {
                return <DataDisplayPanel />
              } else if (tab.label == 'Script') {
                return <ScriptEditor />
              }
              return <>{tab.label} Content</>
            })()}
          </div>
        </TabPane>
      ))}
    </Tabs>
  )
}

export default TabView
